---
layout: example.pug
title: Media search by Algolia
---
<body>
  <header class="row">
    <div><a href="https://community.algolia.com/instantsearch.js/" class="is-logo"><img src="logo-is.png" width="40"></a><a href="./" class="logo">You<i class="fa fa-youtube-play"></i></a></div>
    <div class="searchbox-container">
      <div class="input-group">
        <input id="q" type="text" class="form-control"><span class="input-group-btn">
          <button class="btn btn-default"><i class="fa fa-search"></i></button></span>
      </div>
    </div>
  </header>
  <section>
    <aside>
      <ul class="nav nav-list">
        <li><a href=""><i class="fa fa-home"></i> Home</a></li>
        <li class="separator"></li>
      </ul>
      <h5><i class="fa fa-chevron-right"></i> Genres</h5>
      <div id="genres"></div>
      <h5><i class="fa fa-chevron-right"></i> Ratings</h5>
      <div id="ratings"></div>
      <div class="thank-you">Data courtesy of <a href="https://www.imdb.com/">imdb.com</a></div>
    </aside>
    <article>
      <div id="stats" class="text-right text-muted"></div>
      <hr>
      <div id="hits"></div>
      <div id="pagination" class="text-center"></div>
    </article>
  </section>
  <script src="search.js"></script>
